<template>
  <div class="app-container">
    <div class="addRigon">
      <el-form :inline="true" :model="filter" @keyup.enter.native="fetch()">
        <el-form-item label="品牌名">
          <el-input v-model="filter.name" placeholder="品牌名" clearable />
        </el-form-item>
        <el-form-item label="品牌名">
          <el-select v-model="filter.showStatus" placeholder="显示状态">
            <el-option label="不显示" :value="0" />
            <el-option label="显示" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="检索首字母">
          <el-input v-model="filter.firstLetter" placeholder="检索首字母" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="fetch(1)">查询</el-button>
          <el-button  @click="() => reset()">重置</el-button>
          <el-button  type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button  type="danger" @click="deleteBatch()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableTitle">
      <el-table
        :data="dataSource"
        v-loading="dataListLoading"
        stripe
        @selection-change="selectionChangeHandle"
        style="width: 100%;"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          min-width="10%"
        />
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="品牌名"
          min-width="10%"
        />
        <el-table-column
          label="品牌"
          align="center"
          min-width="20%"
        >
          <template slot-scope="scope">
            <img
              :alt="scope.row.name"
              style="width: 100px; height: 100px;"
              :src="scope.row.logo"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="显示状态"
          align="center"
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.showStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change=" () => checkStatus(scope.row.brandId)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="firstLetter"
          header-align="center"
          align="center"
          label="检索首字母"
          min-width="10%"
        />
        <el-table-column
          prop="descript"
          header-align="center"
          align="center"
          label="介绍"
          min-width="20%"
        />
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          min-width="20%"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pagination.size"
      :current-page="pagination.current"
      :total="pagination.total"
      @current-change="fetch"
    />
    <!-- 弹窗, 新增 / 修改 -->
    <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh="fetch" />
  </div>
</template>

<script>
  import AddOrUpdate from './components/brand-add-or-update'
  import {changeShowStatus, deleteBrand, queryForPage, deleteBatchBrand} from '@/api/product/brand'

  export default {
    data () {
      return {
        filter: {
          name: '',
          showStatus: null,
          firstLetter: ''
        },
        dataSource: [],
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        pagination: {
          current: 1,
          size: 5,
          total: 0
        }
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.fetch()
    },
    methods: {
      // 重置
      async reset () {
        this.filter = {
          name: '',
          showStatus: null,
          firstLetter: ''
        }
        this.pagination = {
          current: 1,
          size: 5,
          total: 0
        }
        await this.fetch()
      },
      // 获取数据列表
      async fetch (e) {
        if (e) {
          this.pagination.current = e
        }
        const params = { ...this.filter, ...this.pagination }
        const { data } = await queryForPage(params)
        const { records, current, size, total } = data
        this.dataSource = records
        this.pagination = { current, size, total }
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (row) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row)
          this.fetch()
        })
      },
      // 通过指定id删除品牌
      deleteHandle (id) {
        this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
            if (this.dataSource.length === 1) {
              this.pagination.current--
            }
            await deleteBrand(id)
            await this.fetch()
          } catch (error) {
            console.log(error)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 更新状态
      async checkStatus (id) {
        await changeShowStatus(id)
      },
      deleteBatch () {
        this.$confirm('此操作将删除该商品类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
            if (this.dataListSelections.length > 0) {
              const ids = this.dataListSelections.map(s => { return s.brandId })
              await deleteBatchBrand(ids)
              if (this.dataSource.length === ids.length) {
                this.pagination.current--
              }
              await this.fetch()
            }
          } catch (error) {
            console.log(error)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消取消操作'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
  .tableTitle{
  div{
    color: rgb(92, 92, 97);
  }
  display: flex;
  justify-content: space-between;
  }
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
  }
  .addRigon {
    margin-bottom: 20px;
  }
</style>
